﻿@{
    ViewBag.Title = "Index";
}

  <link href="@Url.Content("~/Content/FlexGrid/css/flexigrid/flexigrid.css")" rel="stylesheet" type="text/css" />
  <script language="javascript" type="text/javascript" src="@Url.Content("~/Content/FlexGrid/lib/jquery/jquery.js")"></script>
  <script language="javascript" type="text/javascript" src="@Url.Content("~/Content/FlexGrid/flexigrid.js")"></script>
  

 <script type="text/javascript">

     function MontarFlexGrid() {
         $("#produtos").flexigrid({
             url: '@Url.Content("~/Product/GetListaProduto")',
             dataType: 'json',
             colModel: [
				{ display: 'ID', name: 'Id', width: 20, sortable: true, align: 'center' },
				{ display: 'Código', name: 'Codigo', width: 200, sortable: true, align: 'left' },
				{ display: 'Descrição', name: 'Descricao', width: 200, sortable: true, align: 'left' }
				],
             sortname: 'ID',
             sortorder: 'desc',
             usepager: true,
             singleSelect: false,
             useRp: true,
             rp: 30,
             showTableToggleBtn: true,
             resizable: true,
             height: 'auto'
         });
     }

     function Novo() {
         $.ajax({
             url: "../Product/Novo",
             type: "get",
             success: function (data) {
                 $("#Formulario").html(data);
                 $("#lista").hide();
                 $("#Formulario").show();
             }
         });
     }

     $(document).ready(function () {
         MontarFlexGrid();
     });
 </script>

 <div><input type="button" value="Novo" onclick="Novo();"/></div><br />
 <div id="Formulario"></div>

 <div id="lista"> <table id="produtos" style="display:none"></table></div>

 

        


